<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>首页 - 驴妈妈流立方</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
		<!-- ace scripts -->
		<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
		<!-- validator scripts -->
		<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
		<!-- user scripts -->
		<script src="${rc.contextPath}/assets/js/user/base.js"></script>
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
		<!-- BootstrapValidator -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<!-- ace settings handler -->
		<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css" />

	</head>

	<body class="no-skin" style="background-color: #FFF;">
		<div class="page-content">
		<div class="tab-content">
			<div class="row">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-header widget-header-small">
							<h5 class="widget-title lighter">筛选条件</h5>
						</div>
						<div class="widget-body" style="background-color: #EFF3F8;">
							<div class="widget-main">
								<form class="form-inline" id="searchForm" method="post" action="${rc.contextPath}/performanceStatistics/nationalInterfacePerformance">
									<input id="chooseTimeVO" type="hidden" name="chooseTimeVO" value="${monitorVO.chooseTimeVO}">
									<div class="form-group">
										<label for="exampleInputName2">选择时段</label> 
										<input type="text" id="config-demo" name="config-demo" class="form-control time" value="${monitorVO.chooseTimeVO}">
											<button id="app_search" type="button"  onclick="replaceDate('1');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去一周
											</button>
											<button id="app_search" type="button"  onclick="replaceDate('2');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去两周
											</button>
									</div>
									<div class="form-group">
										<label for="exampleInputName2">查询类型</label> 
										<div class="btn-group">
											<label class="btn btn-sm btn-link"> <input
												type="radio" name="searchType" value="avg_api_time" <#if monitorVO.searchType == "avg_api_time">checked="true"</#if>>
												耗时
											</label> <label class="btn btn-sm btn-link"> <input
												type="radio" name="searchType" value="amount" <#if monitorVO.searchType == "amount">checked="true"</#if>>
												调用量
											</label>
										</div>
									</div>
									<div class="form-group">
									  	<button id="search" type="button" onclick="searchClick();" class="btn btn-pink btn-sm">
											<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
											Search
										</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col-xs-6">
					<div class="widget-box">
						<div class="widget-header widget-header-small">
						    <div class="row">
								<div class="col-xs-12">
									<div id="main1" style="width: 100%; height: 500px; margin: 0 auto;"></div>
							    </div>
							</div>
						</div>
					</div> 
				</div>
				<div class="col-xs-6">
					<div class="widget-box">
						<div class="widget-header widget-header-small">
						    <div class="row">
								<div class="col-xs-12">
									<h5 class="widget-title lighter" id="tableSpan">地区接口性能平均耗时排名</h5>
								    	<table id="simple-table" class="table table-striped table-bordered table-hover" style="margin-bottom: 0px;border-bottom: 0px;color:black;">
										<thead>
											<tr>
												<th>序号</th>
												<th>省份</th>
												<th>网络速度(b/ms)</th>
												<th>公网速度(b/ms)</th>
												<th>设备数量</th>
												<#if monitorVO.searchType == "avg_api_time">
													<th>平均耗时(ms)</th>
												</#if>
												<#if monitorVO.searchType == "amount">
													<th>调用量</th>
												</#if>
											</tr>
										</thead>
										<tbody>
											<#if monitorRegionList?? && monitorRegionList?size&gt;0>
												<#list monitorRegionList as monitorRegion>
													<tr class="">
														<td>${monitorRegion_index + 1}</td>
														<td>${monitorRegion.province}</td>
														<td>${monitorRegion.transferSpeed!}</td>
														<td>${monitorRegion.networkSpeed}</td>
														<td>${monitorRegion.deviceNum}</td>
														<#if monitorVO.searchType == "avg_api_time">
															<td>${monitorRegion.avgApiTime!}</td>
														</#if>
														<#if monitorVO.searchType == "amount">
															<td>${monitorRegion.amount!}</td>
														</#if>
													</tr>
												</#list>
											<#else>
												<tr>
													<td colspan="12">
														<div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div>
													</td>
												</tr>
											</#if>
										</tbody>
									</table>
									<#include "paginator.html">
							    </div>
							</div>
						</div>
					</div> 
				</div>
			</div>
				
			<div class="row" id="timeConsumingHave">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-header widget-header-small">
						    <div class="row">
								<div class="col-xs-6">
									<div id="main2" style="width: 100%; height: 500px; margin: 0 auto;"></div>
							    </div>
							    <div class="col-xs-6">
							    	<div id="main3" style="width: 100%; height: 500px; margin: 0 auto;"></div>
							    </div>
							</div>
						</div>
					</div> 
				</div>
			</div>
				
				
			</div>
		</div>

		<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
		
		<!-- <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap.min.css"> -->
		<!-- <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap-theme.min.css"> -->
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">
		<script type="text/javascript" src="${rc.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/bootstrap.min.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/moment.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
	   	
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/echarts.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/china.js"></script>
	   	<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script type="text/javascript">
			var option1,option2,option3;
			var myChart1,myChart2,myChart3;
		
			function replaceDate(obj){
	    		if(obj == '1'){
	    			startDate = new Date(new Date().getTime()-7*1000*60*60*24);
		    		endDate = new Date(new Date().getTime()-1*1000*60*60*24);
	    		}else if(obj == '2'){
	    			startDate = new Date(new Date().getTime()-14*1000*60*60*24);
		    		endDate = new Date(new Date().getTime()-1*1000*60*60*24);
	    		}
			 	var dateStr = dateFormat(startDate) + " - " + dateFormat(endDate);
			    $("#chooseTimeVO").val(dateStr);
			    $(".time").val(dateStr);
	    	}
		
			function dateFormat(date){
	    		var month = date.getMonth() + 1;
    		    var strDate = date.getDate();
    		    if (month >= 1 && month <= 9) {
    		        month = "0" + month;
    		    }
    		    if (strDate >= 0 && strDate <= 9) {
    		        strDate = "0" + strDate;
    		    }
    		    var currentdate = month + "/" + strDate + "/" + date.getFullYear();
    		    return currentdate;
	    	}

			function searchClick() {
				var chooseTime = $("#config-demo").val();
				$('#chooseTimeVO').val(chooseTime);
				$("#searchForm").submit();
			}
			
		
			jQuery(function($) {
				$('.time').daterangepicker(
						{
							startDate: new Date(new Date().getTime()-1*1000*60*60*24),
						    endDate: new Date(new Date().getTime()-1*1000*60*60*24),
							showDropdowns : true,
							showWeekNumbers : false,
							timePicker : false,
							timePicker12Hour : false,
							ranges : {
								'昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				            	'过去7天': [moment().subtract(7, 'days'), moment().subtract(1, 'days')],  
				                '过去31天': [moment().subtract(31, 'days'), moment().subtract(1, 'days')]
							},
							opens : 'right',
							buttonClasses : [ 'btn btn-default' ],
							applyClass : 'btn-small btn-pink blue',
							cancelClass : 'btn-small',
							format : 'yyyy-MM-dd',
							separator : ' to ',
							locale : {
								applyLabel : '确定',
								cancelLabel : '取消',
								fromLabel : '起始时间',
								toLabel : '结束时间',
								customRangeLabel : '自定义',
								daysOfWeek : [ '日', '一', '二', '三', '四', '五',
										'六' ],
								monthNames : [ '一月', '二月', '三月', '四月', '五月',
										'六月', '七月', '八月', '九月', '十月', '十一月',
										'十二月' ],
								firstDay : 1
							}
						},
						function(start, end, label) {//格式化日期显示框  

							$('.time').html(
									start.format('yyyy-MM-dd') + ' - '
											+ end.format('yyyy-MM-dd'));
						});

				var chooseTimeVO = "${monitorVO.chooseTimeVO}";
				if(chooseTimeVO != ""){
					$('#config-demo').val(chooseTimeVO);
				}
				
				/* 数值每3位，逗号隔开 */
				function formatNum(strNum) {
					if (strNum.length <= 3) {
						return strNum;
					}
					if (!/^(\+|-)?(\d+)(\.\d+)?$/.test(strNum)) {
						return strNum;
					}
					var a = RegExp.$1, b = RegExp.$2, c = RegExp.$3;
					var re = new RegExp();
					re.compile("(\\d)(\\d{3})(,|$)");
					while (re.test(b)) {
						b = b.replace(re, "$1,$2$3");
					}
					return a + "" + b + "" + c;
				}

				function randomData() {
    	    	    return Math.round(Math.random()*1000);
    	    	}
				
				option1 = {
    	    		    title: {
    	    		        text: '全国接口性能平均耗时',
    	    		        subtext: '',
    	    		        left: 'center'
    	    		    },
    	    		    tooltip: {
    	    		        trigger: 'item',
    	    		        show:true
    	    		    },
    	    		    grid : {
    	    		    	width: '100%',
    	    		    	height: '100%'
    	    		    },
    	    		    visualMap: {
    	    		        min: 0,
    	    		        max: 2500,
    	    		        left: 'left',
    	    		        top: 'bottom',
    	    		        text: ['高','低'],           // 文本，默认为数值文本
    	    		        calculable: true
    	    		    }, 
    	    		    series: [
    	    		        {
    	    		            name: '全国接口性能平均耗时',
    	    		            type: 'map',
    	    		            mapType: 'china',
    	    		            roam: false,
    	    		            zoom: 1.25,
    	    		            label: {
    	    		                normal: {
    	    		                    show: true
    	    		                },
    	    		                emphasis: {
    	    		                    show: true
    	    		                }
    	    		            },
    	    		            data:[]
    	    		        },
    	    		    ]
    	    		};
				       
				       option2 = {
				    		    title: {
				    		        text: '全国运营商性能对比',
				    		        left : 'center'
				    		    },
				    		    tooltip: {
				    		        trigger: 'axis'
				    		    },
				    		    legend: {
				    		        data:['平均耗时','中国移动','中国联通','中国电信','其他'],
				    		        top : '5%'
				    		    },
				    		    dataZoom: [
				   			         {
				   			             show: true,
				   			             start: 0,
				   			             end: 100,
				   			         },
				   			         
				   			     ],
				    		    toolbox: {
				    		        show: true,
				    		        feature: {
				    		            magicType: {type: ['line', 'bar']},
				    		            restore: {},
				    		            saveAsImage: {}
				    		        }
				    		    },
				    		    xAxis:  {
				    		        type: 'category',
				    		        boundaryGap: false,
				    		        data: []
				    		    /* '2017-02-08','2017-02-09','2017-02-10','2017-02-11','2017-02-12','2017-02-13','2017-02-14' */
				    		    },
				    		    yAxis: {
				    		        type: 'value',
				    		        axisLabel: {
				    		            formatter: '{value}/ms'
				    		        }
				    		    },
				    		    label: {
					                normal: {
					                    show: false,
					                    position: 'top',
					                    formatter: function(p){
				                    		return formatNum(p.value);
				                    	}
					                }
					            },
				    		    series: [
									{
									    name:'平均耗时',
									    type:'line',
									    data:[],
									
									},
				    		        {
				    		            name:'中国移动',
				    		            type:'line',
				    		            data:[],

				    		        },
				    		        {
				    		            name:'中国联通',
				    		            type:'line',
				    		            data:[],
				    		        },
				    		        {
				    		            name:'中国电信',
				    		            type:'line',
				    		            data:[],

				    		        },
				    		        {
				    		            name:'其他',
				    		            type:'line',
				    		            data:[],
				    		        }
				    		    ]
				    		};

				       
		       		option3 = {
		       			title:{
		       				text: "全国运营商首包时间和传输时长对比",
		       				left: "center"
		       			},
		    		    tooltip : {
		    		        trigger: 'axis',
		    		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		    		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		    		        }
		    		    },
		    		    legend: {
		    		        data: ['首包时间', '传输时长'],
		    		        top : '5%'
		    		    },
		    		    toolbox: {
		    		        show: true,
		    		        feature: {
		    		            magicType: {type: ['line', 'bar']},
		    		            restore: {},
		    		            saveAsImage: {}
		    		        }
		    		    },
		    		    grid: {
		    		        left: '3%',
		    		        right: '4%',
		    		        bottom: '3%',
		    		        containLabel: true
		    		    },
		    		    xAxis:  {
		    		        type: 'value',
		    		        axisLabel: {
		    		            formatter: '{value}/ms'
		    		        }
		    		    },
		    		    yAxis: {
		    		        type: 'category',
		    		        data: ['平均耗时','中国移动','中国电信','中国联通','其他']
		    		    },
		    		    series: [
		    		        {
		    		            name: '首包时间',
		    		            type: 'bar',
		    		            stack: '总量',
		    		            label: {
		    		                normal: {
		    		                    show: true,
		    		                    position: 'insideLeft'
		    		                }
		    		            },
		    		            data: []
		    		        },
		    		        {
		    		            name: '传输时长',
		    		            type: 'bar',
		    		            stack: '总量',
		    		            label: {
		    		                normal: {
		    		                    show: true,
		    		                    position: 'insideRight'
		    		                }
		    		            },
		    		            data: []
		    		        }
		    		    ]
		    		};
		       		
	       		var searchType = "${monitorVO.searchType}";
				var monitorRegionJson = eval('${monitorRegionJson!}');
				var monitorRegionJsonXAxis = eval('${monitorRegionJsonXAxis!}');
				var monitorRegionJsonCMData = eval('${monitorRegionJsonCMData!}');
				var monitorRegionJsonCUData = eval('${monitorRegionJsonCUData!}');
				var monitorRegionJsonCTData = eval('${monitorRegionJsonCTData!}');
				var monitorRegionJsonNONEData = eval('${monitorRegionJsonNONEData!}');
				var monitorRegionJsonAvgData = eval('${monitorRegionJsonAvgData!}');
				var avgFirstPackageTimeDataJson = eval('${avgFirstPackageTimeDataJson!}');
				var transferTimeDataJson = eval('${transferTimeDataJson!}');
				var monitorRegionMax = '${monitorRegionMax}';
				var avgApiTimeMax = 0;
				var amountMax = 0;
				if(monitorRegionMax != null){
					avgApiTimeMax = '${monitorRegionMax.avgApiTime}';
					amountMax = '${monitorRegionMax.amount}';
				}
				
				if(monitorRegionJson!=null){
					myChart1 = echarts.init(document.getElementById('main1'));
					myChart2 = echarts.init(document.getElementById('main2'));
					myChart3 = echarts.init(document.getElementById('main3'));
					if(searchType == "avg_api_time"){
						$("#timeConsumingHave").show();
						option1.title.text = "全国接口性能平均耗时";
						option1.visualMap.min = 0;
						option1.visualMap.max = avgApiTimeMax;
						myChart1.setOption(option1,true);
						$("#tableSpan").html("地区接口性能平均耗时排名");
					}else if(searchType == "amount"){
						$("#timeConsumingHave").hide();
						option1.title.text = "全国接口性能调用量";
						option1.visualMap.min = 0;
						option1.visualMap.max = amountMax;
						myChart1.setOption(option1,true);
						$("#tableSpan").html("地区接口性能调用量排名");
					}
					option1.series[0].data = monitorRegionJson;
					option2.xAxis.data = monitorRegionJsonXAxis;
					option2.series[0].data = monitorRegionJsonAvgData;
					option2.series[1].data = monitorRegionJsonCMData;
					option2.series[2].data = monitorRegionJsonCUData;
					option2.series[3].data = monitorRegionJsonCTData; 
					option2.series[4].data = monitorRegionJsonNONEData;
					option3.series[0].data = avgFirstPackageTimeDataJson; 
					option3.series[1].data = transferTimeDataJson;
			  		myChart1.setOption(option1,true);
			  		myChart2.setOption(option2,true);
			  		myChart3.setOption(option3,true);
			  		
			  		myChart1.on('click', function (params) {
			  			var chooseTimeVO = $("#chooseTimeVO").val();
			  			var searchType = $("input[name='searchType']:checked").val();
			  			//var name=encodeURI(encodeURI(params.name));
			  			//alert(name);
			  			$.ajax({
							url : "${rc.contextPath}/performanceStatistics/ajaxLineAndBar",
							type:'post',
							data : {
								"province" : params.name,
								"chooseTimeVO" : chooseTimeVO,
								"searchType" : searchType
							},
							dataType : "json",
							success : function(data) {
								if(data!=null){
									var dateInterval = data.dateInterval;
									var cmData = data.cmData;
									var cuData = data.cuData;
									var ctData = data.ctData;
									var noneData = data.noneData;
									var avgData = data.avgData;
									var avgFirstPackageTimeData = data.avgFirstPackageTimeData;
									var transferTimeData = data.transferTimeData;
									
									option2.xAxis.data = dateInterval;
									option2.series[0].data = avgData;
									option2.series[1].data = cmData;
									option2.series[2].data = cuData;
									option2.series[3].data = ctData; 
									option2.series[4].data = noneData;
									option3.series[0].data = avgFirstPackageTimeData; 
									option3.series[1].data = transferTimeData;
									
									option2.title.text=params.name+ "地区运营商性能对比";
						  			option3.title.text=params.name+ "地区运营商首包时间和下载时长对比";
						  			myChart2.setOption(option2,true);
						  			myChart3.setOption(option3,true);
								}
							}
						});
			  			
			  		});
			  		
			  		window.onresize = function(){
			  	  	  	myChart1.resize();
			  	  		myChart2.resize();
				  	  	myChart3.resize();
			  	  	}
				}

			})
			
			
		</script>


		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.css" /> 
		<script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>
		
		<script>
			 $(function() {
		        $('.chosen-select').chosen();
		       	$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
		     }); 
	      	
			 function statistics(){
				$('#statistics').show();
				$('.chosen-select').chosen("destroy").chosen();
		       	$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
			 }
	    </script>
	    
	</body>
</html>